<script setup>
import { useMemberStore, usePatientStore } from '@/store/index.js'
import { postResphy } from '@/apis/apis.js'
import { showToast } from '@/utils/utils.js'
const memberStore = useMemberStore()
const patientStore = usePatientStore()
const handleSubmit = async () => {
  const data = {
    phy_name: memberStore.phy_name,
    phy_time: memberStore.phy_time,
    patient_id: patientStore.patientId
  }
  const res = await postResphy(data)
  console.log(res)
  showToast('预约成功')
  setTimeout(() => {
    uni.navigateBack()
    uni.redirectTo({ url: '/pages/my-service/phy-exam/phy-exam' })
  }, 1000)
}
const handleClickOverlay = () => {
  memberStore.updateShow(false)
}
const handleChoose = () => {
  uni.navigateTo({ url: '/pages/my-service/my-patient/my-patient' })
}
</script>

<template>
  <page-container class="component" :show="memberStore.show" @clickoverlay="handleClickOverlay" @afterleave="handleClickOverlay">
    <view class="component-container">
      <view class="component-header">选择成员</view>
      <view class="component-body">
        <view class="component-body-left">
          <image class="component-body-left-image" src="/static/images/touxiang.svg" mode="aspectFill"></image>
          <view class="component-body-left-text" v-if="patientStore.patientId !== ''">{{ patientStore.patientName }}</view>
        </view>
        <view class="component-body-right" @click="handleChoose">{{ patientStore.patientId === '' ? '选择成员' : '重新选择' }}</view>
      </view>
      <view class="component-footer" @click="handleSubmit">提交预约</view>
    </view>
  </page-container>
</template>

<style scoped lang="scss">
.component {
  .component-container {
    padding-bottom: env(safe-area-inset-bottom);
    .component-header {
      margin: 20rpx 0;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
    }
    .component-body {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      .component-body-left {
        display: flex;
        align-items: center;
        .component-body-left-image {
          margin-right: 20rpx;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }
      .component-body-right {
        color: #4276e6;
        font-size: 28rpx;
      }
    }
    .component-footer {
      margin: 20rpx;
      padding: 20rpx 0;
      background-color: #4276e6;
      border-radius: 10rpx;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
